<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#1E6DF2" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750" bar-height="4" bar-width="112" gutter="0"
					:bar-style="barStyle"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="dataQuery">
							<view class="datatime" @click="show = true">
								<u-calendar v-model="show" :mode="mode" @change="datatime"></u-calendar>
								<text>{{startDate}} 至 {{endDate}}</text>
								<u-icon class="calendar" color="#999" size="36" name="calendar"></u-icon>
							</view>
							<view class="all">
								全部
								<u-icon class="arrow-down" size="16" name="arrow-down"></u-icon>
							</view>
						</view>
						<view class="state"  @click="orderDetail">
							<view class="center-content">
								<view class="left-img">
									<image src="" mode=""></image>
								</view>
								<view class="right-info">
									<view class="title-info">
										<view>旗峰雅苑停车场</view>
										<!-- 状态 -->
										<view class="in-button">
											进行中
										</view>
										<!-- <view class="in-button1">
											已完成
										</view>
										<view class="in-button2">
											待入场
										</view> -->
									</view>
									<view>车位号:B32</view>
									<view class="pay">
										￥<text>30.00</text>
									</view>
								</view>
							</view>
							<view class="bot-info">
								<view class="bot-item">
									<view>预约时间: 2023.07.06 11:00- 13:00</view>
									<view>入场时间: 2023.07.06 11:20:34</view>
									<view class="usertime">
										已停时长:<text>5小时21分53秒</text>
									</view>
									<view class="timeout">
										<view class="">
											超时费用:￥20
										</view>
										<view class="">
											立即支付
										</view>
									</view>
									<!-- 待入场 取消预约 -->
									<!-- <view class="ordertime">
									<view class="">
										预约时长:<text>2小时</text>
									</view>
									<view class="">
										取消预约
									</view>
								</view> -->
								</view>

								<!-- 订单异常 -->
								<view class="order">
									<u-icon size="36" name="order"></u-icon>
									<text>订单异常,立即上报</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="dataQuery">
							<view class="datatime" @click="show = true">
								<u-calendar v-model="show" :mode="mode" @change="datatime"></u-calendar>
								<text>{{startDate}} 至 {{endDate}}</text>
								<u-icon class="calendar" color="#999" size="36" name="calendar"></u-icon>
							</view>
							<view class="all">
								全部
								<u-icon class="arrow-down" size="16" name="arrow-down"></u-icon>
							</view>
						</view>
						<view class="state" @click="orderDetail">
							<view class="center-content">
								<view class="left-img">
									<image src="" mode=""></image>
								</view>
								<view class="right-info">
									<view class="title-info">
										<view>旗峰雅苑停车场</view>
										<!-- 状态 -->
										<view class="in-button">
											进行中
										</view>
										<!-- <view class="in-button1">
											已完成
										</view>
										<view class="in-button2">
											待入场
										</view> -->
									</view>
									<view>车位号:B32</view>
								</view>
							</view>
							<view class="bot-info">
								<view class="bot-item">
									<view>预约人:王先生(S7994A)</view>
									<view>入场时间: 2023.07.06 11:20:34</view>
									<view class="usertime">
										已停时长:<text>5小时21分53秒</text>
									</view>
								</view>

								<!-- 订单异常 -->
								<view class="order orderUp">
									<u-icon size="36" name="order"></u-icon>
									<text>订单异常,立即上报</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '我的租用'
					},
					{
						name: '我的分享'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				barStyle: {
					marginBottom: '-4rpx'
				},
				show: false,
				mode: 'range',
				endDate: "2023-07-19",
				startDate: '2023-07-11'

			};
		},
		methods: {
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			datatime(e) {
				console.log(e.endDate);
				this.endDate = e.endDate
				this.startDate = e.startDate
			},
			orderDetail(){
				uni.navigateTo({
					url:"/pageB/order/orderDetail"
				})
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	@import "index.scss"

	
</style>